<template>
  <view class="vip-container">
    <!-- 返回按钮 -->
    <!-- 标题 -->
    <view class="title-container">
      <text class="title">升级VIP 尊享多项权益</text>
    </view>

    <!-- VIP特权说明 -->
    <view class="privilege-container">
      <view class="privilege-item">
        <text class="privilege-title">【专属特权】</text>
        <text class="privilege-desc">解锁所有VIP专属高级特权</text>
      </view>
      <view class="privilege-item">
        <text class="privilege-title">【历史记录】</text>
        <text class="privilege-desc">历史记录永久保存（可删除）</text>
      </view>
      <view class="privilege-item">
        <text class="privilege-title">【去除广告】</text>
        <text class="privilege-desc">去除使用过程中的所有广告</text>
      </view>
      <view class="privilege-item">
        <text class="privilege-title">【更多权益】</text>
        <text class="privilege-desc">包含所有未来新增权益</text>
      </view>
    </view>

    <!-- 限时优惠倒计时 -->
    <view class="countdown-container">
      <text class="countdown-text">限时优惠倒计时：</text>
      <text class="countdown-timer">00天23时41分54秒</text>
    </view>

    <!-- 会员套餐选项 -->
    <view class="plans-container">
      <view class="plans-row" v-for="(row, rowIndex) in planRows" :key="rowIndex">
        <view 
          class="plan-item" 
          :class="{active: selectedPlan === plan.key}"
          v-for="plan in row" 
          :key="plan.key"
          @click="selectPlan(plan.key)"
        >
          <view class="price-container">
            <text class="price-symbol">¥</text>
            <text class="price">{{plan.price}}</text>
            <text class="original-price">¥{{plan.originalPrice}}</text>
          </view>
          <view class="duration">
            <text class="duration-text">{{plan.durationText}}</text>
            <text class="duration-days" v-if="plan.days">/ {{plan.days}}天</text>
          </view>
          <view class="daily-price" v-if="plan.dailyPrice">
            <text>¥{{plan.dailyPrice}} / 天</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 立即开通按钮 -->
    <view class="purchase-btn" @click="purchase">
      <text>立即开通</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      selectedPlan: 'permanent',
      planRows: [
        [
          {
            key: 'month',
            price: 28,
            originalPrice: 72,
            days: 30,
            dailyPrice: 0.93,
            durationText: '一月'
          },
          {
            key: 'quarter',
            price: 58,
            originalPrice: 156,
            days: 90,
            dailyPrice: 0.64,
            durationText: '一季'
          }
        ],
        [
          {
            key: 'year',
            price: 108,
            originalPrice: 396,
            days: 365,
            dailyPrice: 0.30,
            durationText: '一年'
          },
          {
            key: 'permanent',
            price: 158,
            originalPrice: 798,
            durationText: '永久'
          }
        ]
      ]
    };
  },
  methods: {
    // 选择套餐
    selectPlan(plan) {
      this.selectedPlan = plan;
    },
    // 返回上一页
    goBack() {
      uni.navigateBack();
    },
    // 购买会员
    purchase() {
      //const selectedPlan = this.plans[this.selectedPlan];
      uni.showLoading({
        title: '处理中...'
      });

      // 这里应该调用实际的支付接口
      setTimeout(() => {
        uni.hideLoading();
        uni.showToast({
          title: `已选择${this.selectedPlan}套餐，价格¥${selectedPlan.price}`,
          icon: 'none'
        });
      }, 1500);
    }
  }
}
</script>

<style lang="scss">
.vip-container {
  min-height: 100vh;
  background-color: #1C1C1E;
  padding: 0 20rpx;
  position: relative;

  .header {
    display: flex;
    justify-content: space-between;
    padding: 40rpx 10rpx 20rpx;

    .back-icon, .header-right {
      height: 60rpx;
      width: 60rpx;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }

  .title-container {
    text-align: center;
    margin: 20rpx 0 40rpx;
    padding-top: 40rpx;

    .title {
      font-size: 36rpx;
      color: #F0C088;
      font-weight: bold;
    }
  }

  .privilege-container {
    background-color: #2C2C2E;
    border-radius: 16rpx;
    padding: 30rpx;
    margin-bottom: 40rpx;

    .privilege-item {
      margin-bottom: 20rpx;
      display: flex;
      align-items: center;

      &:last-child {
        margin-bottom: 0;
      }

      .privilege-title {
        color: #F0C088;
        font-size: 28rpx;
        margin-right: 10rpx;
      }

      .privilege-desc {
        color: #CCCCCC;
        font-size: 28rpx;
      }
    }
  }

  .countdown-container {
    text-align: center;
    margin-bottom: 40rpx;

    .countdown-text {
      font-size: 28rpx;
      color: #F0C088;
    }

    .countdown-timer {
      font-size: 28rpx;
      color: #F0C088;
      margin-left: 10rpx;
    }
  }

  .plans-container {
    margin-bottom: 40rpx;

    .plans-row {
      display: flex;
      justify-content: space-between;
      margin-bottom: 30rpx;

      &:last-child {
        margin-bottom: 0;
      }
    }

    .plan-item {
      width: 48%;
      background-color: #2C2C2E;
      border-radius: 16rpx;
      padding: 30rpx 20rpx;
      box-sizing: border-box;
      border: 2rpx solid transparent;

      &.active {
        background-color: #F0C088;

        .price-container {
          .price, .price-symbol, .original-price {
            color: #2C2C2E;
          }
        }

        .duration {
          text-align: center;
          margin-top: 20rpx;

          text {
            font-size: 32rpx;
            color: #2C2C2E;
            font-weight: bold;
          }
        }

        .daily-price{


          text-align: center;

          text {
            font-size: 24rpx;
            color: #2C2C2E;
          }
        }
      }

      &.permanent {
        background-color: #F0C088;

        .price-container {
          .price, .price-symbol, .original-price {
            color: #2C2C2E;
          }
        }

        .permanent-text {
          text-align: center;
          margin-top: 20rpx;

          text {
            font-size: 32rpx;
            color: #2C2C2E;
            font-weight: bold;
          }
        }
      }

      .price-container {
        display: flex;
        align-items: flex-end;
        justify-content: center;
        margin-bottom: 10rpx;

        .price-symbol {
          font-size: 32rpx;
          color: #F0C088;
          margin-right: 4rpx;
          margin-bottom: 6rpx;
        }

        .price {
          font-size: 48rpx;
          color: #F0C088;
          font-weight: bold;
        }

        .original-price {
          font-size: 24rpx;
          color: #999999;
          margin-left: 10rpx;
          margin-bottom: 6rpx;
          text-decoration: line-through;
        }
      }

      .duration {
        text-align: center;
        margin-bottom: 10rpx;

        .duration-text {
          font-size: 28rpx;
          color: #FFFFFF;
        }

        .duration-days {
          font-size: 24rpx;
          color: #CCCCCC;
        }
      }

      .daily-price {
        text-align: center;

        text {
          font-size: 24rpx;
          color: #CCCCCC;
        }
      }
    }
  }

  .purchase-btn {
    background-color: #F0C088;
    height: 90rpx;
    border-radius: 45rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 40rpx;

    text {
      font-size: 32rpx;
      color: #2C2C2E;
      font-weight: bold;
    }
  }
}
</style>
